<template>
	<view>
		<u-navbar :fixed="true" :placeholder="true" title="举报记录" @leftClick="leftClick" bgColor="#fff"
			leftIconColor="#000">
		</u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs class="uTabs" :list="list" lineWidth="80" lineColor="#1764ce" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" :scrollable="false" :itemStyle="itemStyle" @click="tabsClick"
				:current="current">
			</u-tabs>
			<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		</u-sticky>
		<view class="box" v-if="dataSource.length != 0">
			<view class="list" v-for="item in dataSource" :key="item.id" @click="handleToInfo(item)">
				<view class="titleBox">
					<view class="title">{{item.unitName}}</view>
					<view class="bianhao">{{item.acceptCode}}</view>
				</view>
				<view class="conBox">
					<image src="@/static/home/icon6.png" />
					{{item.address}}
				</view>
				<view class="conBox">
					<image src="@/static/home/icon7.png" />
					{{item.submitTime}}
				</view>
			</view>
			<view class="myBox" v-if="dataSource.length == 0">
				<u-empty mode="car" :icon="myImg" text="暂无数据">
				</u-empty>
			</view>
		</view>
		<view class="box" v-else>
			<view class="myBox">
				<u-empty mode="car" :icon="myImg" text="暂无数据">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import myImg from '@/static/home/bg3.png'
	export default {
		data() {
			return {
				activeStyle: {
					color: '#1764ce',
					fontSize: '34rpx'
				},
				inactiveStyle: {
					color: '#333333',
					fontSize: '30rpx'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '已提交',
				}, {
					name: '处理中',
				}, {
					name: '已办结',
				}],
				dataSource: [],
				params: {
					pn: 1,
					ps: 100,
					status: 1
				},
				myImg: myImg
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.initData()

		},

		methods: {
			tabsClick(e) {
				this.current = e.index
				this.params.status = e.index + 1
				this.initData()
			},
			initData() {
				uni.$u.http.post(`/manage/api/reportRectify/page`, this.params).then(res => {
					this.dataSource = res.data.records
				})
			},
			handleToInfo(item){
				uni.navigateTo({
					url: `/pages/home/reportInfo?id=${item.id}`
				})
			},
			//点击返回按钮
			leftClick() {
				uni.reLaunch({
					url: '/pages/home/login/index'
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F6F7;
	}

	.tab-page {
		margin-top: 2rpx;
	}

	.u-empty .u-icon {
		z-index: -1;
	}

	.u-tabs__wrapper__nav__item {
		// padding: 0 !important;
		// width: 50%;
	}

	.scroll2 {
		height: calc(100vh - 50px);
	}

	.image1 {
		width: 100vw;
		height: 461vw;

	}

	.image2 {
		width: 100vw;
		height: 300vw;
	}

	.box {
		background-color: #F5F6F7;
		padding: 20rpx 32rpx;
		.myBox{
			padding-top: 400rpx;
		}
		.list {
			border-radius: 16rpx;
			padding: 32rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.titleBox {
				margin-bottom: 46rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(51, 51, 51, 1);
				}

				.bianhao {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}
			}

			.conBox {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				image {
					min-width: 28rpx;
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>
